<template>
    <div class="ml-16px mr-16px mb-16px pt-26px content-container">
        <div class="pl-26px pr-26px pb-26px words-container">
            <div class="flex items-center pl-36px pt-26px -mt-26px -ml-26px text-14px font-bold level-2-title">
                自定义问题
            </div>
            <div class="pt-20px">
                <div class="words-item">
                            <div class="words-item__list mt-3px !h-220px">
                                <el-input v-model="state.cusKeyWords" :rows="10" type="textarea"
                                    @change="handleChange()" @blur="handleBlur()" placeholder="请输入自定义关键词，一行代表一个关键词"
                                    @keyup.enter.native="handleEnter()" />
                            </div>
                        </div>
            </div>
            <div class="flex justify-end mt-16px">
                <el-button :loading="state.loading" type="primary" @click="handleConfirm">确认提交</el-button>
            </div>
        </div>
        <ConfirmWord v-model:isConfirmDialogVisible="state.isConfirmDialogVisible" :rule-form="ruleForm" @closeDialog="handleClose" />
    </div>
</template>

<script setup lang="ts">
import ConfirmWord from './ConfirmWord.vue'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { combineWordsApi } from '@/api/whiteList/index'

import { checkMainWord } from '@/utils/index'


const props = defineProps<{
    ruleForm: any
}>()

//自定义关键词

const state = reactive({
    cusKeyWords: '',
    loading: false,
    isConfirmDialogVisible: false
})

function handleEnter() {
    let lines = state.cusKeyWords.split('\n')
    lines = lines.filter(item => item !== "")   //去除空字符串
    lines = [...new Set(lines)]     //去重

    if (lines.length === 0) {
        return false
    } else {
        props.ruleForm.cusKeyword = lines.join('/')
    }
}

function handleBlur() {
    handleEnter()
}

function handleChange() {
    if (!state.cusKeyWords.length) {
        props.ruleForm.cusKeyword = ''
    }
}


async function handleClose() {
    state.loading = false
    state.isConfirmDialogVisible = false
}
async function handleConfirm() {
        try {
        const res = await combineWordsApi({
            Keyword: checkMainWord(props.ruleForm.mainWords),
            leftkeydata: props.ruleForm.frontWords,
            rightkeydata: props.ruleForm.backWords,
            Type: props.ruleForm.combinationOptions,
            Freedoms: props.ruleForm.checkCombinationOptions,
        })
        console.log(res)
        if (res.code === 200) {
            props.ruleForm.FreedomWords = res.freedomdata
            props.ruleForm.FMBWords = res.data    //有不有前缀和后缀都要弹窗
            state.loading = false
            state.isConfirmDialogVisible = true
        }
    } catch (error: any) {
        if (error.response && error.response.status === 405) {
            confirmMessageBox(CircleCloseFilled, error.response.data.message)
            state.loading = false
        }
    }
}


watch(() => props.ruleForm.cusKeyword, () => {
    if (props.ruleForm.cusKeyword.length > 0 && state.cusKeyWords == '') {
        state.cusKeyWords = props.ruleForm.cusKeyword.split('/').join('\n')
    }
})

</script>

<style scoped></style>